<template>
  <v-chart :options="orgOption" autoresize />
</template>

<script>
import imgUrl from "@/assets/img/smartphone-line.svg";

export default {
  name: "AppDataPie",
  data() {
    return {
      imgUrl: imgUrl,
      data: [
        {
          value: 30,
          name: "会员",
          itemStyle: {
            color: "#0286ff"
          }
        },
        {
          value: 100,
          name: "普通用户",
          itemStyle: {
            color: "#FB5274"
          }
        }
      ],
      orgOption: {}
    };
  },
  mounted: function() {
    this.orgOption = {
      graphic: {
        elements: [
          {
            type: "image",
            style: {
              image: imgUrl,
              width: "80",
              height: "80"
            },
            left: "center",
            top: "33%"
          }
        ]
      },
      title: {
        text: "APP 数据",
        left: "center",
        top: "55%",
        padding: [24, 0],
        textStyle: {
          color: "#fff",
          fontSize: 15,
          align: "center"
        }
      },
      tooltip: {
        show: true,
        backgroundColor: "rgba(255,255,255,0.1)"
      },
      series: [
        {
          type: "pie",
          radius: ["70%", "80%"],
          center: ["50%", "50%"],
          hoverAnimation: true,
          z: 10,
          data: this.data,
          label: {
            formatter: "{b} {d}%"
          }
        },
        {
          type: "pie",
          radius: ["60%", "70%"],
          center: ["50%", "50%"],
          hoverAnimation: false,
          label: {
            show: false
          },
          itemStyle: {
            opacity: 0.4
          },
          data: this.data,
          labelLine: {
            show: false
          }
        },
        {
          type: "pie",
          radius: ["50%", "60%"],
          center: ["50%", "50%"],
          hoverAnimation: false,
          label: {
            show: false
          },
          itemStyle: {
            opacity: 0.1
          },
          data: this.data,
          labelLine: {
            show: false
          }
        }
      ]
    };
  }
};
</script>

<style scoped>
.echarts {
  height: 25vh !important;
}
</style>
